<script>
import { GlBadge } from '@gitlab/ui';
import { VULNERABILITY_STATES, DISMISSAL_REASONS } from 'ee/vulnerabilities/constants';

export default {
  components: {
    GlBadge,
  },
  props: {
    state: {
      type: String,
      required: true,
    },
    dismissalReason: {
      type: String,
      required: false,
      default: null,
    },
  },
  computed: {
    stateText() {
      return VULNERABILITY_STATES[this.state.toLowerCase()];
    },
    dismissalReasonText() {
      return DISMISSAL_REASONS[this.dismissalReason.toLowerCase()];
    },
    showDismissalReason() {
      return this.state === 'DISMISSED' && this.dismissalReason;
    },
  },
};
</script>

<template>
  <span class="gl-display-flex gl-flex-wrap gl-gap-2">
    <span class="gl-text-transform-capitalize" data-testid="state-text">{{ stateText }}</span>
    <gl-badge v-if="showDismissalReason" size="sm" variant="neutral">{{
      dismissalReasonText
    }}</gl-badge>
  </span>
</template>
